* {
  margin: 0;
  padding: 0;
}
/* 
  flex布局：
      1. 父元素设置display: flex; 子元素会自动成为弹性盒子
      2. flex-direction: row | row-reverse | column | column-reverse
      3. justify-content: flex-start | flex-end | center | space-between | space-around
      4. align-items: stretch | flex-start | flex-end | center | baseline
*/
.container {
  display: flex;
  flex-direction: row-reverse;
  background-color: blueviolet;
  width: 100%;
  height: 500px;
}
.box1 {
  background-color: yellow;
  width: 100px;
  height: 100px;
  flex: 4
}
.box2 {
  background-color: pink;
  width: 100px;
  height: 200px;
  flex: 2
}
.box3 {
  background-color: gray;
  width: 100px;
  height: 300px;
  flex: 2
}
.box4 {
  background-color: green;
  width: 100px;
  height: 400px;
  flex: 1
}